<template>
  <div class="diary-page">
    <el-container>
      <el-header class="header">
        <div class="header-content">
          <div class="header-left">
            <el-button @click="$router.push('/calendar')" icon="ArrowLeft" class="back-btn">
              返回
            </el-button>
          </div>
          <div class="header-center">
            <div class="page-title">
              <el-icon class="title-icon"><Edit /></el-icon>
              <h2>日志</h2>
            </div>
          </div>
          <div class="header-right">
            <div class="date-navigation">
              <!-- <el-button @click="previousDay" icon="ArrowLeft" class="nav-btn">前一天</el-button> -->
              <div class="current-date">
                <span class="week-text">{{ formatDate(dayjs())  }}{{ formatWeekDay(dayjs()) }}</span>
                <!-- <span class="week-text">{{ formatWeekDay(dayjs()) }}</span> -->
              </div>
              <!-- <el-button @click="nextDay" icon="ArrowRight" class="nav-btn">后一天</el-button> -->
            </div>
          </div>
        </div>
      </el-header>
      
      

      <el-main class="main">

         <!-- 关键修改：给名言容器添加卡片类，与下方日志卡片样式对齐 -->
      <el-card class="diary-card saying-card">
        <div class="main-top-saying-text">{{ saying }}</div>
      </el-card>
        <!-- 第一个日志卡片（动态日期） -->
        <el-card class="diary-card" @dblclick="handleContainerDoubleClick">
          <template #header>
            <div class="diary-header">
              <!-- <h3>日志</h3> -->
                 <div class="header-right1">
            <div class="date-navigation">
              <!-- <el-button @click="previousDay"  class="nav-btn1">🔙</el-button> -->
                <span class="date-text" @click="previousDay" >🔙</span>
              <div class="current-date">
               
                <!-- <span class="date-text">{{ formatDate(currentDate) }}</span>
                <span class="week-text">{{ formatWeekDay(currentDate) }}</span> -->
                <!-- 替换为相对时间 -->
              <span class="relative-text">{{ formatRelativeTime() }}</span>
                
              </div>
              <span class="date-text" @click="nextDay" >🔜</span>
              <!-- <el-button @click="nextDay"  class="nav-btn1">🔜 </el-button> -->
            </div>
          </div>
              <div class="diary-status" :class="{ pulse: statusPulsing }" @click="toggleExpand">
                <el-tag v-if="isEditing" type="warning">编辑模式</el-tag>
                <el-tag v-else type="info">只读模式</el-tag>
                <span v-if="lastUpdateTime" class="update-time">
                  {{ lastUpdateTime }}
                </span>
              </div>
            </div>
          </template>
          
          <div class="diary-content">
            <!-- 新增专属类 class="diary-textarea first-diary-textarea"  -->
            <el-input
              v-model="diaryContent"
              type="textarea"
              :rows="15"
              :autosize="isExpanded ? { minRows: 15, maxRows: 999 } : { minRows: 15, maxRows: 15 }"
              placeholder="双击开始编辑您的日志..."
              :readonly="!isEditing"
              @dblclick.stop="startEditing"
              resize="none"
              class="diary-textarea first-diary-textarea"
              :class="{ expanded: isExpanded }"
              ref="diaryTextarea"
              @click.stop
            />
          </div>
          
          <!-- <div class="diary-footer">
            <div class="edit-tip">
              <el-icon><InfoFilled /></el-icon>
              <span>双击文本框进入编辑模式，双击其他地方自动保存</span>
            </div>
          </div> -->
        </el-card>

        <!-- 第二个日志卡片（固定日期：2045-12-31） -->
        <el-card class="diary-card" @dblclick="(e) => handleHistoryContainerDoubleClick(e)">
          <template #header>
            <div class="diary-header">
              <div class="header-right1">
                <div class="date-navigation">
                  <div class="current-date">
                    <!-- 固定显示2045-12-31及对应星期 -->
                    <span class="relative-text">2045-12-31 {{ formatWeekDay(dayjs('2045-12-31')) }}</span>
                  </div>
                </div>
              </div>
              <div class="diary-status" :class="{ pulse: historyStatusPulsing }" @click="toggleHistoryExpand">
                <el-tag v-if="isHistoryEditing" type="warning">编辑模式</el-tag>
                <el-tag v-else type="info">只读模式</el-tag>
                <span v-if="lastHistoryUpdateTime" class="update-time">
                  {{ lastHistoryUpdateTime }}
                </span>
              </div>
            </div>
          </template>
          
          <div class="diary-content">
            <!-- 新增专属类 class="diary-textarea second-diary-textarea"  -->
            <el-input
              v-model="diaryContentHistory"
              type="textarea"
              :rows="15"
              :autosize="isHistoryExpanded ? { minRows: 15, maxRows: 999 } : { minRows: 15, maxRows: 15 }"
              placeholder="双击开始编辑2045年12月31日的日志..."
              :readonly="!isHistoryEditing"
              @dblclick.stop="startHistoryEditing"
              resize="none"
              class="diary-textarea second-diary-textarea"
              :class="{ expanded: isHistoryExpanded }"
              ref="historyDiaryTextarea"
              @click.stop
            />
          </div>
        </el-card>

        <!-- 计时卡片 -->
        <el-card class="timer-summary" v-if="timerData.hasRecords">
          <template #header>
            <h4>今日计时记录</h4>
          </template>
          <div class="timer-info">
            <div class="timer-item">
              <span class="label">总计时间：</span>
              <span class="value">{{ formatTime(timerData.totalTime) }}</span>
            </div>
            <div class="timer-item">
              <span class="label">倒计时：</span>
              <span class="value">{{ formatTime(timerData.countdownTime) }}</span>
            </div>
            <div class="timer-item">
              <span class="label">正计时：</span>
              <span class="value">{{ formatTime(timerData.timerTime) }}</span>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
    
    <!-- 悬浮主题切换按钮 -->

  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '../utils/request'
import dayjs from 'dayjs'
import { InfoFilled, Edit } from '@element-plus/icons-vue'

// 引入并配置dayjs（不变）
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')

// -------------------------- 共享基础数据 --------------------------
const route = useRoute()
const router = useRouter()
const saying = ref('')
const timerData = ref({ hasRecords: false, totalTime: 0, countdownTime: 0, timerTime: 0 })

// -------------------------- 第一个卡片（动态日期）专属数据 --------------------------
const diaryContent = ref('')
const isEditing = ref(false)
const lastUpdateTime = ref('')
const diaryTextarea = ref(null)
// 展开/折叠（第一个卡片）默认折叠
const isExpanded = ref(false)
const statusPulsing = ref(false)

// 第一个卡片动态日期（跟随路由）
const currentDate = computed(() => {
  const dateParam = route.params.date
  return dateParam ? dayjs(dateParam).toDate() : new Date()
})

// -------------------------- 第二个卡片（固定日期2045-12-31）专属数据 --------------------------
const diaryContentHistory = ref('') // 专属内容
const isHistoryEditing = ref(false) // 专属编辑状态
const lastHistoryUpdateTime = ref('') // 专属更新时间
const historyDiaryTextarea = ref(null) // 专属文本框引用
const fixedHistoryDate = '2045-12-31' // 固定日期常量
// 展开/折叠（第二个卡片）默认折叠
const isHistoryExpanded = ref(false)
const historyStatusPulsing = ref(false)

// -------------------------- 共享工具方法 --------------------------
const formatWeekDay = (date) => dayjs(date).format('dddd')
const formatTime = (seconds) => {
  if (!seconds) return '0小时0分钟'
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  return `${hours}小时${minutes}分钟`
}

// 展开/折叠按钮文案
const expandLabel = computed(() => (isExpanded.value ? '折叠' : '展开'))
const historyExpandLabel = computed(() => (isHistoryExpanded.value ? '折叠' : '展开'))

// 切换展开/折叠
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
  nextTick(() => {
    try {
      diaryTextarea.value && typeof diaryTextarea.value.resizeTextarea === 'function' && diaryTextarea.value.resizeTextarea()
    } catch (e) {}
  })
  // click pulse
  statusPulsing.value = true
  setTimeout(() => (statusPulsing.value = false), 180)
}
const toggleHistoryExpand = () => {
  isHistoryExpanded.value = !isHistoryExpanded.value
  nextTick(() => {
    try {
      historyDiaryTextarea.value && typeof historyDiaryTextarea.value.resizeTextarea === 'function' && historyDiaryTextarea.value.resizeTextarea()
    } catch (e) {}
  })
  // click pulse
  historyStatusPulsing.value = true
  setTimeout(() => (historyStatusPulsing.value = false), 180)
}

// 格式化更新时间（通用）
const formatUpdateTime = (timestamp) => {
  if (!timestamp) return ''
  const now = new Date()
  const updateTime = new Date(timestamp)
  const diffSec = Math.floor((now - updateTime) / 1000)
  if (diffSec < 60) return `${diffSec} 秒前`
  if (diffSec < 3600) return `${Math.floor(diffSec / 60)} 分钟前`
  if (diffSec < 86400) return `${Math.floor(diffSec / 3600)} 小时前`
  if (diffSec < 2592000) return `${Math.floor(diffSec / 86400)} 天前`
  return dayjs(timestamp).format('YYYY年MM月DD日')
}

// -------------------------- 名言请求（不变） --------------------------
const fetchSaying = async () => {
  try {
    const res = await request.get('/getSaying')
    saying.value = res.data
  } catch (err) {
    console.error('获取谚语失败:', err)
    saying.value = '岁月不居，时节如流。 —— 论盛孝章书'
  }
}

// -------------------------- 第一个卡片（动态日期）方法 --------------------------
const startEditing = () => {
  isEditing.value = true
  nextTick(() => {
    if (diaryTextarea.value) {
      const textarea = diaryTextarea.value.$el.querySelector('textarea')
      textarea && textarea.focus()
    }
  })
}

const handleContainerDoubleClick = (event) => {
  const isTextareaClick = event.target.closest('.el-textarea') || event.target.classList.contains('el-textarea__inner')
  if (isTextareaClick) return
  if (isEditing.value) {
    isEditing.value = false
    saveDiary()
  }
}

const loadDiary = async () => {
  try {
    const dateStr = dayjs(currentDate.value).format('YYYY-MM-DD')
    const res = await request.get(`/diary/${dateStr}`)
    diaryContent.value = res.data.diary.content || ''
    lastUpdateTime.value = res.data.diary.updated_at ? formatUpdateTime(res.data.diary.updated_at) : ''
  } catch (err) {
    console.error('加载动态日志失败:', err)
    ElMessage.error('加载日志失败')
  }
}

const saveDiary = async () => {
  try {
    const dateStr = dayjs(currentDate.value).format('YYYY-MM-DD')
    await request.post(`/diary/${dateStr}`, { content: diaryContent.value })
    ElMessage.success('动态日志保存成功')
    lastUpdateTime.value = formatUpdateTime(new Date())
  } catch (err) {
    console.error('保存动态日志失败:', err)
    ElMessage.error('保存失败')
  } finally {
    isEditing.value = false
  }
}

// -------------------------- 第二个卡片（固定日期）方法 --------------------------
// 专属编辑启动
const startHistoryEditing = () => {
  isHistoryEditing.value = true
  nextTick(() => {
    if (historyDiaryTextarea.value) {
      const textarea = historyDiaryTextarea.value.$el.querySelector('textarea')
      textarea && textarea.focus()
    }
  })
}

// 专属双击保存
const handleHistoryContainerDoubleClick = (event) => {
  const isTextareaClick = event.target.closest('.el-textarea') || event.target.classList.contains('el-textarea__inner')
  if (isTextareaClick) return
  if (isHistoryEditing.value) {
    isHistoryEditing.value = false
    saveHistoryDiary()
  }
}

// 专属加载（固定请求2045-12-31）
const loadHistoryDiary = async () => {
  try {
    const res = await request.get(`/diary/${fixedHistoryDate}`)
    diaryContentHistory.value = res.data.diary.content || ''
    lastHistoryUpdateTime.value = res.data.diary.updated_at ? formatUpdateTime(res.data.diary.updated_at) : ''
  } catch (err) {
    console.error('加载2045年日志失败:', err)
    ElMessage.error('加载历史日志失败')
  }
}

// 专属保存（固定提交2045-12-31）
const saveHistoryDiary = async () => {
  try {
    await request.post(`/diary/${fixedHistoryDate}`, { content: diaryContentHistory.value })
    ElMessage.success('2045.12.31保存成功')
    lastHistoryUpdateTime.value = formatUpdateTime(new Date())
  } catch (err) {
    console.error('保存2045年日志失败:', err)
    ElMessage.error('保存历史日志失败')
  } finally {
    isHistoryEditing.value = false
  }
}

// -------------------------- 计时数据加载（不变） --------------------------
const loadTimerData = async () => {
  try {
    const dateStr = dayjs(currentDate.value).format('YYYY-MM-DD')
    const res = await request.get(`/timer/${dateStr}`)
    timerData.value = res.data
  } catch (err) {
    console.error('加载计时数据失败:', err)
  }
}

// -------------------------- 生命周期与监听 --------------------------
// 组件挂载时加载所有数据
onMounted(() => {
  fetchSaying()
  loadDiary()
  loadHistoryDiary() // 新增：加载固定日期日志
  loadTimerData()
})

// 路由变化时，只更新第一个动态卡片和计时数据
watch(() => route.params.date, () => {
  loadDiary()
  loadTimerData()
})

// 第一个卡片日期格式化（不变）
const formatRelativeTime = () => {
  const now = dayjs().startOf('day')
  const target = dayjs(currentDate.value).startOf('day')
  const diffDays = target.diff(now, 'day')
  const absDiff = Math.abs(diffDays)

  if (diffDays === 0) return '今天'
  if (diffDays === -1) return '昨天'
  if (diffDays === -2) return '前天'
  if (diffDays === 1) return '明天'
  if (diffDays === 2) return '后天'
  if (absDiff >= 30 && absDiff < 60) return diffDays < 0 ? '一个月前' : '一个月后'
  if (absDiff >= 60 && absDiff < 90) return diffDays < 0 ? '两个月前' : '两个月后'
  if (absDiff >= 90 && absDiff < 120) return diffDays < 0 ? '三个月前' : '三个月后'
  return diffDays < 0 ? `${-diffDays}天前` : `${diffDays}天后`
}

const formatDate = (date) => {
  return dayjs(date).format('YYYY.MM.DD')
}

// 切换到前一天
const previousDay = () => {
  const newDate = dayjs(currentDate.value).subtract(1, 'day')
  router.push(`/diary/${newDate.format('YYYY-MM-DD')}`)
}

// 切换到后一天
const nextDay = () => {
  const newDate = dayjs(currentDate.value).add(1, 'day')
  router.push(`/diary/${newDate.format('YYYY-MM-DD')}`)
}
</script>

<style scoped>
.diary-page {
  min-height: 100vh;
  background-color: var(--bg-primary);
}

.header {
  background: var(--header-bg);
  color: white;
  padding: 0 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.title-icon {
  font-size: 24px;
  color: #ffd700;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.page-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.back-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  border-radius: 8px;
  font-weight: 500;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  border-radius: 6px;
  font-weight: 500;
  min-width: 60px;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.date-navigation {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.current-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}

.date-text {
  font-size: 16px;
  font-weight: 600;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.week-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main {
  padding: 20px;
}

.diary-card {
  max-width: 800px;
  margin: 0 auto 20px;
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

.diary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.diary-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.diary-status {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

/* 点击动画：轻微缩放 + 阴影明暗变化 */
.diary-status {
  transition: transform 0.15s ease, filter 0.15s ease;
}
.diary-status.pulse {
  transform: scale(0.97);
  filter: brightness(0.98);
}

.update-time {
  color: var(--text-muted);
  font-size: 12px;
}

.diary-content {
  /* margin-bottom: 20px; */
  cursor: text;
}

.diary-textarea {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
}

.diary-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.edit-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

.timer-summary {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

.timer-summary h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.timer-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.timer-item .label {
  color: var(--text-secondary);
  font-size: 14px;
}

.timer-item .value {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 16px;
}
.dark-theme .diary-page {
  background: var(--header-bg);
}
.dark-theme .el-main {
  background: var(--header-bg);
}

/* 移动端适配 */
@media (max-width: 768px) {
  html.app-5plus .header {
    padding-top: var(--status-bar-height);
    height: calc(55px + var(--status-bar-height));
  }
  
  .header-content {
    flex-direction: row;
    padding: 10px 0;
    gap: 6px;
  }
  
  .page-title {
    padding: 6px 12px;
    gap: 8px;
  }
  
  .title-icon {
    font-size: 20px;
  }
  
  .page-title h2 {
    font-size: 16px;
  }
  
  .back-btn {
    padding: 6px 10px;
    font-size: 14px;
  }
  
  .date-navigation {
    padding: 6px 12px;
    gap: 8px;
  }
  
  .nav-btn {
    min-width: 50px;
    font-size: 12px;
    padding: 4px 8px;
  }
  
  .current-date {
    min-width: 80px;
  }
  
  .date-text {
    font-size: 14px;
  }
  
  .week-text {
    font-size: 10px;
  }
  
  .header-content .el-button span {
    display: none;
  }
  
  .main {
    padding: 10px;
  }
  
  .diary-textarea {
    font-size: 13px;
  }
  
  .diary-status {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

 
}
/* 原有样式不变，新增名言卡片样式 */
/* 1. 控制名言卡片的间距和位置，与下方日志卡片对齐 */
.saying-card {
  max-width: 800px; /* 与下方日志卡片宽度一致 */

 
  background-color: var(--bg-card); /* 复用卡片背景色 */
  border-color: var(--border-color); /* 复用卡片边框色 */
    padding-top: 1px;
    padding-right: 1px;
    padding-bottom: 1px;
    padding-left: 1px;
}

/* 2. 名言文本样式优化（可选，根据需求调整） */
.main-top-saying-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-primary);
  /* text-align: center; 居中显示更美观 */
  /* padding: 20px 0; */
}

/* 穿透 scoped 作用域，重写 el-card 的 el-card__body已有的样式  重置 el-card__body 样式 */
::v-deep .el-card__body {
  /* 清除默认内边距（Element 默认是 16px） */
  padding: 5px; 
  /* 清除默认边框（如果有的话） */
  /* border: none; */
  /* 清除默认背景色（默认是白色） */
  /* background-color: transparent; */
  /* 清除默认阴影（如果有的话） */
  /* box-shadow: none; */
  /* 其他需要重置的样式（如margin、字体等） */
  /* margin: 0px; */
  /* font-size: 14px; */
}
::v-deep .el-card__header{
  /* 清除默认内边距（Element 默认是 16px） */
  padding: 5px; 
}

/* 原有样式不变，新增第一个文本框的背景图样式 */
/* 1. 定位第一个日志卡片的文本框，设置背景图 */
/* 默认/折叠：单层 cover */
::v-deep .first-diary-textarea .el-textarea__inner {
  background-image: url('/public/assets/daymode.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-opacity: 0.1;
  position: relative;
  z-index: 1;
}
/* 展开：多层（上层 repeat-y 纹理 + 下层 cover） */
::v-deep .first-diary-textarea.expanded .el-textarea__inner {
  background-image: url('/public/assets/daymode.jpeg'), url('/public/assets/daymode.jpeg');
  background-repeat: repeat-y, no-repeat;
  background-size: 100% auto, cover;
  background-position: top center, center;
}

/* 2. 可选：添加文字阴影，进一步提升文字可读性 */
::v-deep .first-diary-textarea .el-textarea__inner {
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}



/* 默认/折叠：单层 cover */
::v-deep .second-diary-textarea .el-textarea__inner {
  background-image: url('/public/assets/lanyangyang1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-opacity: 0.1;
  position: relative;
  z-index: 1;
}
/* 展开：多层（上层 repeat-y 纹理 + 下层 cover） */
::v-deep .second-diary-textarea.expanded .el-textarea__inner {
  background-image: url('/public/assets/lanyangyang1.jpg'), url('/public/assets/lanyangyang1.jpg');
  background-repeat: repeat-y, no-repeat;
  background-size: 100% auto, cover;
  background-position: top center, center;
}

/* 可选：添加文字阴影，进一步提升文字可读性 */
::v-deep .second-diary-textarea .el-textarea__inner {
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
}
/* 在 style 标签中添加 */
.date-text {
  cursor: pointer; /* 鼠标悬停显示手型 */
  padding: 2px 8px; /* 扩大点击区域 */
  border-radius: 4px;
  transition: background-color 0.2s;
}
/* 悬停效果 */
/* .date-text:hover {
  background-color: rgba(0, 0, 0, 0.1); 
} */
</style> 
<style>
  .dark-theme .diary-content .el-textarea__inner
{
  color: black;
}
.dark-theme .second-diary-textarea .el-textarea__inner {
  /* 替换为你的背景图URL，支持网络图片或本地图片 */
  background-image: url('/public/assets/lanyangyang2.jpg');
}
/* 展开：多层（上层 repeat-y 纹理 + 下层 cover） */
 .dark-theme .second-diary-textarea.expanded .el-textarea__inner {
  background-image: url('/public/assets/lanyangyang2.jpg'), url('/public/assets/lanyangyang1.jpg');
 
}
</style>